var json = {};

/*
function buildJSONColumn() {

    json.chart = {
        type: 'column'
    };

    json.title = {
        text: '月平均气温',
        align: 'middle'
    };

    json.xAxis = {
        categories: ['1', '2', '3', '4', '5', '6',
                     '7', '8', '9', '10', '11', '12']
    };

    json.yAxis = {
        min: 0,
        title: {
            text: 'Temperature'
        }
    };

    json.tooltip = {
        headerFormat: '<span style="font-size: 10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color: {series.color}; padding: 0">{series.name}: </td>' + 
                     '<td style="padding: 0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    };

    json.legend = {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    };

    json.series =  [
       {
          name: 'Tokyo',
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 
             26.5, 23.3, 18.3, 13.9, 9.6]
       }, 
       {
          name: 'New York',
          data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
             24.1, 20.1, 14.1, 8.6, 2.5]
       }, 
       {
          name: 'Berlin',
          data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 
             17.9, 14.3, 9.0, 3.9, 1.0]
       }, 
       {
          name: 'London',
          data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
             16.6, 14.2, 10.3, 6.6, 4.8]
       }
    ];

    json.plotOptions = {
        column: {
            pointPadding: 0.5,
            borderWidth: 0
        }
    };

    json.credits = {
        enabled: false
    };
}
*/

function buildJSONPie() {

    json.chart = {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    };

    json.title = {
        text: '2014 browers\'s count'
    };

    json.tooltip = {
        pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
    };

    json.plotOptions = {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    };

    json.series = [{
        type: 'pie',
        name: 'Browser share',
        data: [
            ['Firefox', 45.0],
            ['IE', 26.8],
            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['Safari', 8.5],
            ['Opera', 6.2],
            ['Others', 0.7]
        ]
    }];
}

$(document).ready(function () {

    // buildJSONColumn();
    buildJSONPie();

    $('#container').highcharts(json);

});